<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高级版轮播图</title>
<style type="text/css">
	div,img{
		width: 200px;
		height: 150px;
		position:relative;  /* 相对定位*/
	}
	img{
		position:absolute;    /* 绝对定位 */
	}
	div{
		overflow: hidden; /*超出此(div)标签的内容不显示*/
	}
</style>
<script type="text/javascript">
	onload = function(){
		/* 获取第一张图片 */
		var arr = document.getElementsByTagName("img");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*200+"px";
		}
	}
	onclick = function(){
		change();
	}
	//每隔1秒移动一次图片
	  var timer = setInterval(change,1000);
	
	//改变图片的方法
	function change(){
	 /*开启定时器移动图片  */
	var moveTimer = setInterval(function(){
		 var arr = document.getElementsByTagName("img");
		 for(var i = 0;i<arr.length;i++){
			  //取出原来的left的值
			  var oldLeft = parseInt(arr[i].style.left);
			  oldLeft -=2;
			  
			  //离开页面后把图片放到两张图片的后面
			  if(oldLeft<=-200){
				  oldLeft=400;  
				  //让定时器停止
				  clearInterval(moveTimer);
			  }
			  //把值在赋值回去
			 arr[i].style.left = oldLeft+"px";
		 }
	 },10);
	}
	
	function stop(){
		console.log("停止")
		clearInterval(timer);  /*停止timer该计时器  */
	}
	
	function start(){
		//停止之前的定时器
		stop();
		console.log("开始")
		timer = setInterval(change,2000);  /* 重启动计时器 */
	}
	//失去焦点事件
	onblur = function(){   //离开页面时图片停止轮播
		stop();
	}
	//获取焦点事件
	onfocus = function(){   //回到页面时图片开始轮播
		start();
	}
</script>
</head>
<body>
	<div onmouseover="stop()" onmouseout="start()">
		<img alt="" src="../imgs/1.jpg">
		<img alt="" src="../imgs/2.jpg">
		<img alt="" src="../imgs/6.jpg">
	</div>
</body>
</html>